// 从vue库中导入创建应用实例的函数createApp（Vue3的新语法）
import { createApp } from 'vue'
// 导入根组件App（整个应用的入口组件，所有页面/组件都嵌套在它内部）
import App from './App.vue'
// 导入路由实例（来自router目录，用于管理单页应用的页面跳转）
import router from './router'
// 导入状态管理实例（来自store目录，用于集中管理全局共享数据）
import store from './store'
// 导入Ant Design Vue组件库（提供各种现成的UI组件，如按钮、表单等）
import Antd from 'ant-design-vue'
// 导入Ant Design Vue的样式文件（确保组件能显示默认样式）
import "ant-design-vue/dist/antd.css"
// 导入@ant-design/icons-vue库中的所有图标，打包成一个Icons对象（键是图标名，值是图标组件）
import * as Icons from '@ant-design/icons-vue';
import axios from 'axios';
// 创建Vue应用实例，以App组件作为整个应用的根组件
const app = createApp(App);

// 依次为应用安装插件：
// 1. 安装Ant Design Vue组件库（全局可用其组件）
// 2. 安装状态管理（全局可访问共享数据）
// 3. 安装路由（支持页面跳转）
// 最后将应用挂载到页面中id为"app"的DOM元素上（该元素通常在public/index.html中）
app.use(Antd).use(store).use(router).mount('#app')

// 为Icons对象创建别名icons（简化后续代码中的引用）
const icons = Icons;

// 全局注册所有Ant Design图标组件
// 遍历icons对象的每个属性（属性名是图标组件名，属性值是图标组件）
for (const i in icons) {
    // 把每个图标注册为全局组件：第一个参数是组件名，第二个参数是组件本身
    // 注册后，在任何子组件中可直接用<图标名/>使用，无需单独导入
    app.component(i, icons[i]);
}

/**
 * axios拦截器
 */
axios.interceptors.request.use(function (config) {
    console.log('请求参数：', config);
    return config;
}, error => {
    return Promise.reject(error);
});
axios.interceptors.response.use(function (response) {
    console.log('返回结果：', response);
    return response;
}, error => {
    console.log('返回错误：', error);
    return Promise.reject(error);
});
axios.defaults.baseURL = process.env.VUE_APP_SERVER;
console.log('环境：', process.env.NODE_ENV);
console.log('服务端：', process.env.VUE_APP_SERVER);